<template>
  <view class="list_page">
    <cu-custom bgColor="bgcolorfff" :isBack="true">
      <block slot="content"><view class="toptext">评论详情</view></block>
    </cu-custom>

    <view class="list">
      <view class="list_f">
        <view class="first">
          <image :src="lastPage.avatar" mode="widthFix"></image>
          <view>
            <text>{{ lastPage.userName }}</text>
            <text>{{ lastPage.addTimes || "" }}</text>
          </view>
        </view>
        <view class="user_text">{{ lastPage.intro }}</view>
        <view class="second">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="second_re"
            @click.self.stop="openInput(item)"
          >
            <view>
              <image :src="item.avatar" />
              <text class="replay_name">{{ item.userName }} </text>
            </view>
            <text class="second_text">
              <text
                v-if="item.type == 1 || item.type == 2"
                class="replay_orther"
                >{{ item.intro }}</text
              >
              <text v-if="item.type == 3" class="replay_bt">
                <text class="replay_title">回复{{ item.atUserName }}:</text
                >&emsp;
                <text class="replay_text"> &nbsp; {{ item.intro }}</text>
              </text>
            </text>
            <view class="time">{{ format(item.addTimestamp) }}</view>
          </view>
        </view>
      </view>
      <text style="height: 190rpx; width: 100%; display: block;"></text>
    </view>

    <view
      class="mask"
      @touchmove.self.prevent
      v-show="switchmask"
      :style="[{ zIndex: switchmask == true ? '10' : '-1' }]"
      @click.stop="closeModel"
    >
    </view>

    <view @click.stop :style="[{ bottom: keyboardhHeight }]" class="sendinput">
      <view
        ><input
          type="text"
          v-model="text"
          :adjust-position="false"
          @focus="keyboard"
          :focus="focus"
          @blur="blurin"
          :placeholder="hold || '说点什么'"
      /></view>
      <button @click="submite">发送</button>
    </view>
    <loading v-if="loadingflag"></loading>
    <Prompt v-model="authSwitch"></Prompt>
  </view>
</template>

<script>
import { getPersonChart, replyMsg, getReplaydetail } from "../../api/api";
export default {
  data() {
    return {
      id: "",
      index: 0,
      size: 10,
      list: [],
      hasdata: true,
      text: "",
      switchmask: false,
      keyboardhHeight: "",
      focus: false,
      openItem: "",
      hold: "",
      loadingflag: false,
      lastPage: {},
    };
  },
  async onLoad({ id }) {
    this.id = id;
    let res = await getReplaydetail(id);
    if (res[1].data.code === "000000") {
      this.lastPage = res[1].data.data;
    }
    console.log(res);
    this.getList();
  },
  onReachBottom() {
    if (this.hasdata == true) {
      this.getList();
    }
  },
  watch: {
    focus: function (newvalue) {
      if (newvalue == false) {
        this.openItem = "";
        this.hold = "";
      }
    },
  },
  computed: {
    format() {
      return (timestamp) => {
        return new Date(parseInt(("/Date(" + timestamp + ")/").substr(6, 13)))
          .toLocaleDateString()
          .replace(/(\/)/g, "-");
      };
    },
  },
  methods: {
    getList() {
      this.loadingflag = true;
      this.index++;
      getPersonChart(this.id, this.index, this.size).then((res) => {
        this.loadingflag = false;
        if (res[1].data.code === "000000") {
          const { content } = res[1].data.data;
          console.log(res);
          if (content == null || content.length < 10) {
            this.hasdata = false;
          }
          if (content != null && content != []) this.list.push(...content);
        }
      });
    },
    closeModel() {
      this.switchmask = false;
      this.focus = false;
      this.text = "";
    },
    openInput(item) {
      this.switchmask = true;
      this.openItem = item;
      this.hold = "回复:" + item.userName;
      setTimeout(() => {
        this.focus = true;
      }, 100);
    },
    keyboard(e) {
      this.switchmask = true;
      this.keyboardhHeight = e.detail.height + "px";
    },
    blurin() {
      this.keyboardhHeight = 0;
    },
    async submite() {
      if (!this.AuthState()) return;
      let id = "";
      if (this.openItem != "") {
        id = this.openItem.id;
      } else {
        id = this.id;
      }
      try {
        let res = await replyMsg(id, this.text);
        if (res[1].data.code === "000000") {
          uni.showToast({
            title: "评论成功",
            duration: 2000,
            icon: "none",
          });
          this.list = [];
          this.index = 0;
          this.getList();
        }
      } catch (error) {}
      this.closeModel();
    },
  },
};
</script>

<style lang="scss" scoped>
.list_page {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  // overflow-x: hidden;
}
.list {
  width: 100%;
  padding-left: 40rpx;
  background-color: #ffffff;
  .list_f {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin-top: 40rpx;
    width: calc(100% - 40rpx);

    .first {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      > image {
        width: 77rpx;
        height: 77rpx;
        background-color: red;
        border-radius: 50%;
      }
      > view {
        height: 77rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        margin-left: 23rpx;
        > text {
          &:first-child {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(117, 117, 117, 1);
            margin-left: -2rpx;
          }
          &:nth-child(2) {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(117, 117, 117, 1);
          }
        }
      }
    }
    > text {
      margin-left: 96rpx;
      margin-top: 25rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(36, 36, 36, 1);
      position: relative;
      padding-bottom: 40rpx;
      width: calc(100% - 96rpx);
      &::after {
        position: absolute;
        content: " ";
        width: 100%;
        left: 0;
        bottom: 0;
        height: 1px;
        background: rgba(232, 232, 232, 1);
        transform: scaleY(0.5);
      }
    }
    .second {
      padding-left: 96rpx;
      width: 100%;
      position: relative;
      &::after {
        content: " ";
        position: absolute;
        left: 163rpx;
        bottom: -78rpx;
        background: rgba(232, 232, 232, 1);
        height: 1px;
        transform: scaleY(0.5);
        width: calc(100% - 163rpx);
      }
      .second_text {
        margin-top: 8rpx;
      }
      .second_re {
        margin-top: 30rpx;
        width: 100%;
        > view {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > image {
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
          }
          > text {
            margin-left: 23rpx;
          }
          .replay_name {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(117, 117, 117, 1);
          }
        }
        > text {
          padding-left: 66rpx;
          display: inline-block;
          width: 100%;
          .replay_title {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(87, 87, 87, 1);
          }
          .replay_text {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(36, 36, 36, 1);
            margin-left: 18rpx;
          }
          .replay_orther {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(36, 36, 36, 1);
            width: 100%;
            word-wrap: break-word;
          }
        }
      }
    }
    .user_text {
      margin-left: 96rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(36, 36, 36, 1);
      padding-top: 25rpx;
    }
    .replay_bt {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // margin-left: 66rpx;
      width: 100%;
      word-wrap: break-word;
      overflow: hidden;
    }
  }
}
.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.sendinput {
  padding: 22rpx 0;
  padding-left: 38rpx;
  background-color: #fff;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
  &::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    transform: scaleY(0.5);
    content: " ";
    background: rgba(232, 232, 232, 1);
  }
  > view {
    width: 564rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(243, 243, 243, 1);
    height: 65rpx;
    padding-left: 40rpx;
    border-radius: 32rpx;
    overflow: hidden;
    > input {
      width: 100%;
      background: rgba(243, 243, 243, 1);
      line-height: 65rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(117, 117, 117, 1);
    }
  }
  > button {
    border: none;
    background-color: #fff;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(117, 117, 117, 1);
  }
}
button::after {
  border: none;
}
.time {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(117, 117, 117, 1);
  vertical-align: middle;
  padding-left: 66rpx;
  padding-top: 12rpx;
}
</style>
